<template>
	<view class="page">
    <u-navbar title=" " :border="false" :autoBack="true" bgColor="#00000000" leftIconSize="44rpx"></u-navbar>
		<view class="m-brokerl">
			<view class="pic">
				<image :src="userinfo.avatar" lazy-load class="img" mode="widthFix"></image>
			</view>
			<view class="info">
				<view class="itm">
					<view class="num"><text class="em">{{ userinfo.profile.service_num || 0 }}</text> 人</view>
					<view class="tt">服务客户</view>
				</view>
				<view class="itm">
					<view class="num"><text class="em">{{ userinfo.profile.take_look_num || 0 }}</text> 次</view>
					<view class="tt">勘察楼盘</view>
				</view>
				<view class="itm">
					<view class="num"><text class="em">{{ userinfo.profile.satisfaction_degree || '00' }}</text> %</view>
					<view class="tt">满意度</view>
				</view>
			</view>
		</view>
		<view class="m-infol">
			<view class="title">个人介绍</view>
			<view class="box">
				<view class="ll">企业:</view>
				<view class="rr">{{ userinfo.profile.enterprise || '佳和房产' }}</view>
			</view>
			<view class="box">
				<view class="ll">实名:</view>
				<view class="rr">{{ userinfo.nickname || userinfo.profile.name || '' }}</view>
			</view>
			<view class="box">
				<view class="ll">职务:</view>
				<view class="rr">{{ userinfo.profile.position || '经纪人' }}</view>
			</view>
			<view class="box">
				<view class="ll">电话:</view>
				<view class="rr">{{ userinfo.mobile || userinfo.profile.phone || '' }}</view>
			</view>
			<view class="box">
				<view class="ll">业绩:</view>
				<view class="rr">{{ userinfo.profile.performance || '' }}</view>
			</view>
			<view class="box">
				<view class="ll">从业时间:</view>
				<view class="rr">{{ userinfo.profile.employment_time || '' }}</view>
			</view>
		</view>
		<view class="page-foot bgf">
			<view class="footbox">
				<view  class="flex-box flex-between foot1">
					<view class="flex-box">
						<image :src="userinfo.avatar" class="footavatar" mode="aspectFill">
						</image>
						<view>
							<view class="name">{{ userinfo.nickname || userinfo.profile.name || '' }}</view>
							<!-- <view class="fs24 col8">服务<text class="orange">{{ house_info.default_broker.profile.service_num }}</text>人</view> -->
						</view>
					</view>
					<view class="flex-box">
						<view class="btn1" @click="makeCall">打电话</view>
						<!-- <view @tap="jumpToChat" :data-uid="house_info.default_broker.user.id" class="btn2">立即微聊</view> -->
						<!-- <button open-type="contact" class="btn2">立即微聊</button> -->
<!--						<button class="btn2" @click="showWeChatImg">加微信</button>-->
            <button class="btn2" @tap.stop.prevent="jumpToPop" :data-wechatnum="userinfo.mobile">加微信</button>
					</view>
				</view>
				<view v-if="0" class="foot2 flex-box flex-between">
					<view class="flex-box">
						<view class="tc conbtn1">
							<image src="/static/icon/icon_tel2.png" class="icon_tel2"></image>
							<view class="fs24">咨询热线</view>
						</view>
						<navigator url="/pages/home/help_you/help_you" class="tc conbtn2">
							<image src="/static/icon/icon_search-b.png" class="icon_search"></image>
							<view class="fs24">帮我找房</view>
						</navigator>
					</view>
					<view class="flex-box">
						<view class="btn1">留电咨询</view>
						<!-- <view @tap="jumpToChat" class="btn2">立即微聊</view> -->
						<button open-type="contact" class="btn2">立即微聊</button>
					</view>
				</view>
			</view>
		</view>
    <!-- 弹出微信号 start-->
    <u-popup :show="wechatStatus" mode="center" closeable :safeAreaInsetBottom="false" @close="closeWeChatStatus">
      <view class="reserve">
        <view class="title1">咨询师微信号</view>
        <view class="title2">{{ wechatnum }}</view>
        <button class="reserve-btn2" @tap="closeWeChatStatus">复制</button>
      </view>
    </u-popup>
    <!-- 弹出微信号 end -->
	</view>
</template>

<script>
	import functions from "@/utils/functions";

  const app = getApp();
	export default {
		data() {
			return {
        id: 0,
        userinfo:{
          nickname: '',
          mobile: '',
          avatar: '',
          profile: {},
        },
        wechatnum:'',
        wechatStatus:false,
			}
		},
    onLoad(params){
      this.id = params.id || 0
      if(!this.id) return uni.showToast({title: '经纪人ID错误',icon:'none'})
      this.initData(this.id)
    },
		methods: {
			initData(id){
        let that = this;
        functions.getAjaxData('/api/xiluhouse.user/broker_detail', {id: id}, function (res) {
          app.globalData.userInfo = res.data.broker_info;
          that.userinfo = res.data.broker_info;
        });
      },
      showWeChatImg(){
        if(!this.userinfo.profile.wechat_img) return uni.showToast({title: '经纪人暂未上传微信图片',icon:'none'})
        uni.previewImage({
          urls: [app.globalData.web_url + this.userinfo.profile.wechat_img],
        })
      },
      makeCall(){
        let phone = this.userinfo.mobile || this.userinfo.profile.phone || ''
        console.log('makeCall', phone)
        if(!phone) return uni.showToast({title: '经纪人暂未上传手机号',icon:'none'})
        uni.makePhoneCall({
          phoneNumber: phone,
        })
      },
      //微信弹框
      jumpToPop(e){
        this.wechatnum = e.currentTarget.dataset.wechatnum || 0;
        this.wechatStatus=true;
      },
      closeWeChatStatus() {
        var text = this.wechatnum
        uni.setClipboardData({
          data: this.wechatnum,
          success: () => {
            console.log('复制成功');
          },
          fail: (err) => {
            console.log('复制失败', err);
          }
        });
        this.wechatStatus = false;
      },
		}
	}
</script>

<style lang="scss">
.page{
	min-height: 100vh;
	background: #f4f5f9;
	overflow: hidden;
}
.m-brokerl{
	overflow: hidden;
	position: relative;
	padding-bottom: 57rpx;
	margin-bottom: 30rpx;
	background: #fafafa;
	.pic{
		width: 100%;
		height: 617rpx;
		overflow: hidden;
		.img{
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	.info{
		position: absolute;
		bottom: 87rpx;
		left: 0;
		width: 100%;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		.itm{
			overflow: hidden;
			padding: 0 24rpx;
			.num{
				font-size: 22rpx;
				color: #fff;
				overflow: hidden;
				margin-bottom: 6rpx;
				.em{
					font-size: 32rpx;
					font-weight: bold;
				}
			}
			.tt{
				font-size: 24rpx;
				color: #fff;
				overflow: hidden;
			}
		}
	}
}
.m-infol{
	overflow: hidden;
	background: #fafafa;
	padding: 46rpx 40rpx 40rpx;
	.title{
		font-size: 34rpx;
		color: #000;
		overflow: hidden;
		font-weight: bold;
		margin-bottom: 24rpx;
	}
	.box{
    font-size: 28rpx;
    margin-bottom: 32rpx;
    margin-top: 20rpx;
    overflow: hidden;
    display: flex; /* 使用flex布局实现底部对齐 */
    align-items: flex-end; /* 底部对齐 */
    .ll{
      color: #999;
      /* float: left; 移除浮动 */
      overflow: hidden;
      margin-right: 30rpx;
      flex-shrink: 0; /* 防止标签被压缩 */
    }
    .rr{
      font-size: 34rpx;
      color: #000;
      overflow: hidden;
      flex-grow: 1; /* 占据剩余空间 */
    }
  }
}

.footbox button {
		font-weight: normal;
		padding: 0;
		margin: 0;
	}

	.footbox {
		background-color: #fff;
	}

	.footavatar {
		width: 75rpx;
		height: 75rpx;
		border-radius: 50%;
		margin-right: 15rpx;
	}

	.footbox .name {
		font-size: var(--fs32);
		line-height: 43rpx;
	}

	.footbox .btn1 {
		width: 220rpx;
		margin: 0;
		padding: 0;
		text-align: center;
		line-height: 90rpx;
		color: #fff;
		font-size: var(--fs34);
		font-weight: normal;
		height: 90rpx;
		border-radius: 10rpx;
		background: var(--blue);
		box-shadow: 0rpx 4rpx 40rpx rgba(3, 103, 179, 0.3);
	}

	.footbox .btn2 {
		width: 220rpx;
		margin: 0;
		padding: 0;
		text-align: center;
		line-height: 90rpx;
		color: #fff;
		font-size: var(--fs34);
		font-weight: normal;
		height: 90rpx;
		border-radius: 10rpx;
		background: #ff7b40;
		margin-left: 15rpx;
		box-shadow: 0px 4rpx 40rpx rgba(248, 103, 56, 0.3);
	}


	.footbox .icon_search {
		width: 32rpx;
		height: 32rpx;
		margin-bottom: 6rpx;
	}

	.footbox .icon_tel2 {
		width: 36rpx;
		height: 36rpx;
		margin-bottom: 9rpx;
	}

	.footbox .conbtn1 {
		width: 150rpx;
		border-right: 1px solid #f4f3f3;
		font-size: var(--fs24);
		color: #333;
	}

	.footbox .conbtn2 {
		width: 150rpx;
		font-size: var(--fs24);
		color: #333;
	}

	.footbox .foot2 {
		height: 100rpx;
		background-color: #fff;
		padding-right: 40rpx;
		border-top: 1px solid #f6f7fa;
	}

	.footbox .foot1 {
		height: 100rpx;
		background-color: #fff;
		padding: 0 40rpx;
	}













</style>
